<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <template #header>
                    <el-row>
                        <el-col :span="12"><h3>角色管理</h3></el-col>
                        <el-col :span="12" style="text-align: right">
                            <el-button size="small" type="success" icon="el-icon-plus" @click="addRole">添加资源</el-button>
                        </el-col>
                    </el-row>
                </template>

                <el-row :gutter="20">
                    <el-col :span="15">
                        <!--                            <el-button-group>
                                                        <el-button size="small" type="primary" icon="el-icon-edit"></el-button>
                                                        <el-button size="small" type="primary" icon="el-icon-share">批量授权</el-button>
                                                        <el-button size="small" type="primary" icon="el-icon-delete"></el-button>
                                                    </el-button-group>-->
                        <el-table :data="roleTableData"
                                  :cell-style="{height: '20px', padding: '5px 0'}"
                                  style="width: 100%;">
                            <el-table-column type="index" align="center" label="序号" width="70"/>
                            <el-table-column prop="name" label="角色名称"/>
                            <el-table-column prop="code" label="角色编码"/>
                            <el-table-column fixed="right" align="center" label="操作" width="240">
                                <template #default="scope">
                                    <el-button @click="modifyRole(scope.row)" type="text">修改</el-button>
                                    <el-button @click.prevent="delRole(scope.$index, roleTableData)"
                                               type="text">删除
                                    </el-button>
                                    <el-button @click="loadOwnAuth(scope.row)" type="text">查看权限</el-button>
                                    <el-button @click="grantTo(scope.row)" type="text">授权</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="9">
                        <el-card shadow="never" class="auth-show-zone">
                            <template #header>
                                <span>{{ authOwner === '' ? '已授予的权限' : authOwner + '的权限' }}</span>
                            </template>
                            <el-table v-if="authOwner !== ''" :data="authedData"
                                      border
                                      empty-text="暂未授权"
                                      :cell-style="{height: '20px', padding: '5px 0'}"
                                      row-key="id"
                                      default-expand-all>
                                <el-table-column type="index" align="center" width="60" label="序号"/>
                                <el-table-column prop="name" label="角色名称"/>
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>

            </el-card>
        </el-col>
        <role-form v-model:show="roleForm.show"
                   :opt="roleForm.event"
                   :datas="roleForm.data"
                   @finishMethod="loadRoleList"/>
        <auth-resource-tree v-model:show="resoTreeData.show" :owner="resoTreeData.role"/>
    </el-row>
</template>

<script>
import RoleForm from "@/views/system/role/RoleForm"
import AuthResourceTree from "@/views/system/role/AuthResourceTree"
import roleReq from '@/services/role/request'
import resourceReq from '@/services/resource/request'

export default {
    name: "Role",
    components: {AuthResourceTree, RoleForm},
    data() {
        return {
            roleTableData: [],
            roleForm: {
                show: false,
                event: "",
                data: null,
            },
            authedData: [],
            authOwner: '',
            resoTreeData: {
                show: false,
                role: null
            }
        }
    },
    mounted() {
        this.loadRoleList()
    },
    methods: {
        grantTo(role) {
            this.resoTreeData.role = JSON.parse(JSON.stringify(role))
            this.resoTreeData.show = true
        },
        async loadOwnAuth(row) {
            let r = await resourceReq.listTree({roleId: row.id})
            if (r.code === 0) {
                this.authOwner = row.name
                this.authedData = r.data
            } else {
                this.$message.error('加载已有的权限列表失败')
            }
        },
        async loadRoleList() {
            let r = await roleReq.list()
            if (r.code === 0) {
                this.roleTableData = r.data
            } else {
                this.$message.error(r.msg + '')
            }
        },
        addRole() {
            this.roleForm.data = {}
            this.roleForm.event = 'ADD'
            this.roleForm.show = true
        },
        delRole(index, rows) {
            this.$confirm("确定删除本行数据么?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                let r = await roleReq.delete({}, [rows[index].id])
                if (r.code === 0) {
                    this.$message.success("删除成功");
                    rows.splice(index, 1);
                } else {
                    this.$message.error(r.msg);
                }
            }).catch(err => {
            });
        },
        modifyRole(row) {
            // 深拷贝
            this.roleForm.data = JSON.parse(JSON.stringify(row))
            this.roleForm.event = 'EDIT'
            this.roleForm.show = true
        }
    }
}
</script>

<style lang="scss">
.auth-show-zone {
    .el-card__header {
        text-align: center;
        background-color: #F6F6F6;
        font-size: 18px;
        padding: 11px 0;
    }

    .el-card__body {
        height: 300px;
        overflow-y: scroll;
    }
}
</style>